<template>
  <div class="common-page alarm-page f-c">
    <BackPage title="预警项目" />
    <div class="tabs f-r a-c">
      <div
          v-for="item in tabs"
          :key="item.value"
          :class="['tab-item f-1', activeTab === item.value ? 'active' : '']"
          @click="activeTab = item.value"
      >{{ item.name }}</div>
    </div>
    <component :is="activeTab"></component>
  </div>
</template>

<script>
import Page1 from './page1'
import Page2 from './page2'
export default {
  name: 'Index',
  components: {
    Page1,
    Page2
  },
  data() {
    return {
      activeTab: 'Page1',
      tabs: [
        { value: 'Page1', name: '项目预警' },
        { value: 'Page2', name: '服务预警' },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
